<template>
    <div class="body">
        <div class="pageClose">
            <div class="pageTitle" style="background: none;">损赔</div>
            <div @click="router.back()" style="cursor: pointer;">关闭</div>
        </div>
        <div class="boxContent">
            <div class="boxLeft">
                <div class="orderBox">
                    <div class="orderDetails">
                        <div class="tableTop">桌台：{{ls.get('TABLE_INFO').roomName }}</div>
                        <div class="tableInfo">
                            <div>已点：<span style="color: #FF6A00;">{{ goodsTotalData.totalCount }}项</span></div>
                            <div>合计：<span style="color: #FF6A00;">¥<span style="font-size: 22px;">{{
                                goodsTotalData.totlePrice }}</span></span></div>
                        </div>

                        <div class="MenuTitle">
                            <div>商品</div>
                            <div>价格</div>
                            <div>数量</div>
                            <div>操作</div>
                        </div>

                        <div v-if="menuGoodsList.length == '0'" class="foolNull">
                            <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/foolNull.png">
                            <div>请在右侧添加商品</div>
                        </div>
                        <div  class="MenuMain">
                            <div class="MenuList">
                                <div class="MenuItem" v-for="(item, index) in menuGoodsList" :key="index"
                                    :class="{ MenuItemActive: index == isMenuItemActive }" @click="editItem(item, index)">
                                    <div class="goodsTitle">
                                        <!-- <div class="name" v-if="item.priceList[0].detail"><span
                                                v-if="item.groupTypeName == '套餐'">{{ item.groupTypeName }}</span>{{
                                                    item.goodsName }}</div>
                                        <div class="name" v-if="!item.priceList[0].detail">{{ item.priceList[0].goodsName +
                                            '（' + item.priceList[0].uomName + '）' }}</div> -->
                                        <div class="name">{{ item.goodsName }}</div>
                                        <div class="price">¥ {{ item.price * item.count }}</div>
                                        <div class="count">{{ item.count }}</div>
                                    </div>
                                    <!-- <div class="goodsTaste" v-if="item.flavors">{{ item.flavors.toString() }}</div> -->
                                    <!-- <div v-for="(i, s) in item.priceList" :key="s" v-if="item.priceList[0].detail">
                                        <div class="goodsMinutia" v-if="!item.priceList[0].detail">
                                            <div class="dot"></div>
                                            <div class="typ">{{ i.goodsName + '（' + i.uomName + '）' }}</div>
                                        </div>
                                        <div class="goodsMinutia" style="display: block;">
                                            <div v-for="(v, s) in item.priceList[0].detail" :key="s"
                                                style="display: flex; align-items: center;">
                                                <div class="dot"></div>
                                                <div class="typ">{{ v.goodsName }}</div>
                                                <div class="fvor" v-if="v.flavors.length > 0">{{ '（' + v.flavors.toString()
                                                    + '）' }}</div>
                                                <div class="count">{{ 'x' + v.defaultQty }}</div>
                                            </div>
                                        </div>
                                    </div> -->
                                </div>
                                <div class="listRemark" v-if="orderRemark">
                                    <div>备注：{{ orderRemark }}</div>
                                </div>
                            </div>
                            <div class="menuOperation">
                    <div @click="countAdd()">数量<img
                            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/add.png" alt=""></div>
                    <div @click="countSubtract()">数量<img
                            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/subtract.png" alt=""></div>
                    <div @click="editCount()">修改数量</div>
                    <div @click="delGoods()">删除商品</div>
                    <!-- <div @click="flavorsShow()">选择口味</div> -->
                    <!-- <div @click="menuGoodsList[isMenuItemActive].flavors = ''">删除口味</div> -->
                    <div @click="removeGoods()">清空商品</div>
                    <!-- <div @click="remarkModal()">整单备注</div> -->
                    <!-- <div>叫起</div> -->
                    <!-- <div>{{ priceList.priceList }}</div> -->
                            </div>
                        </div>
                        <!-- <div class="orderPage">
                    <div>上一页</div>
                    <div>下一页</div>
                </div> -->
                    </div>

                    <div class="orderCheckout">
                        <!-- <div @click="placeOrder()">下单</div> -->
                        <div @click="placeCheckout">结账</div>
                    </div>
                    <!-- <div @click="jump()">获取已点商品列表单号{{ orderBatchCode }}</div> -->
                </div>

    
            </div>

            <div class="boxRight">
                <div class="goodsBox">
                    <div class="goodsLeft">
                        <div class="menuScroll">
                            <div class="goodsMenu">
                                <!-- <div :class="{ TypeActive: isTypeActive == '-1' }" @click="changeType('', '-1')">全部</div> -->
                                <div v-for="(item, index) in GoodsTypeList" :key="index"
                                    :class="{ TypeActive: index == isTypeActive }" @click="changeType(item, index)">{{
                                        item.goodsTypeName }}</div>
                            </div>
                        </div>
                        <div class="sCodeSearch">
                            <div class="SearchBtn" @click="keyPressShow = true">按简码搜索</div>
                            <div class="SearchPanel" v-if="keyPressShow">
                                <div class="SearchHead">
                                    <div class="SearchBar">
                                        <!-- <div>{{ goodsCode }}</div> -->
                                        <input type="text" v-model="goodsCode" disabled placeholder="请输入菜品简码">
                                        <span @click="SearchBtn()">搜索</span>
                                    </div>
                                    <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/close.png"
                                        style="cursor: pointer;" @click="keyPressClose">
                                </div>
                                <div class="SearchKey">
                                    <div v-for="(item, index) in keyboard" :key="index" @click="keyPress(item)">{{ item }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="goodsRight">
                        <div class="goodsItem" :class="{ goodsItemAmi: item.ami }" v-for="(item, index) in GoodsList"
                            :key="index" @click="addGoods(item)">
                            <div class="goodsLogoS">
                                <img v-if="item.isUseGold == '1'" class="img-jinbi"
                                    src="https://oss.jtmckj.com/wmp/qnjg/center/icon_jinbi.png" alt="">
                                <img v-if="item.mainAttachment" :src="item.mainAttachment" class="goodsLogo">
                                <img v-else :src="PCMaterialPic" class="goodsLogo">
                                <!-- <div class="goodsVipPrice">
                                    会员价:￥{{ item.vipPrice }}
                                </div> -->
                            </div>
                            <div class="goodsName"><span v-if="item.groupTypeName == '套餐'">{{ item.groupTypeName }}</span>{{
                                item.goodsName }}</div>
                            <div class="goodsPrice">￥{{ item.price }}</div>
                            <div class="Mask" v-if="item.isEstmClear == '1'" @click.stop>
                                <div>已售罄</div>
                            </div>
                        </div>
                        <div class="goodsPage">
                            <div @click="PageUp()" :class="{ disbPages: disbPageUp == true }">上一页</div>
                            <div @click="PageDown()" :class="{ disbPages: disbPageDown == true }">下一页</div>
                        </div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <el-dialog title="修改数量" v-model="digitaShow" width="22%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="digitalPanel">
                    <el-input v-model="tempNum" @input="oninput()"></el-input>
                    <div class="digitalNum">
                        <div class="numBtn" @click="oninput('1')">1</div>
                        <div class="numBtn" @click="oninput('2')">2</div>
                        <div class="numBtn" @click="oninput('3')">3</div>
                        <div class="numBtn" @click="delinput(tempNum)"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/del.png"
                                style="width: 40px; height: auto;"></div>
                        <div class="numBtn" @click="oninput('4')">4</div>
                        <div class="numBtn" @click="oninput('5')">5</div>
                        <div class="numBtn" @click="oninput('6')">6</div>
                        <div class="numBtn" @click="removeinput()">删除</div>
                        <div class="numBtn" @click="oninput('7')">7</div>
                        <div class="numBtn" @click="oninput('8')">8</div>
                        <div class="numBtn" @click="oninput('9')">9</div>
                        <div class="numBtn" @click="oninput('0')">0</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="digitaShow = false">取 消</el-button>
                        <el-button @click="subNum()">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="选择口味" v-model="tasteShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="tasteContent">
                    <div class="tasteClass">
                        <div @click="changeFlavor('', '-1')" :class="{ FlavorActive: isFlavorActive == '-1' }">全部</div>
                        <div v-for="(item, index) in flavorList" :key="index" @click="changeFlavor(item, index)"
                            :class="{ FlavorActive: index == isFlavorActive }">{{ item.name }}</div>
                    </div>
                    <div class="tasteList">
                        <div class="tasteItem" v-for="(item, index) in flavorItemS" :key="index" @click="ChoseFlavor(item)"
                            :class="{ tasteActive: item.state }">{{ item.name }}</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="tasteShow = false">取 消</el-button>
                        <el-button @click="subFlavor(thisGoodsFlavor)">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="整单备注" v-model="remarkShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="remarkContent">
                    <textarea cols="30" rows="10" placeholder="请输入口味备注" v-model="remark"></textarea>
                    <div @click="remark = ''">清除</div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="remarkShow = false">取 消</el-button>
                        <el-button @click="remarkShow = false, orderRemark = remark">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog v-model="packGoodsShow" width="63%" destroy-on-close :show-close="false" center class="packDialog">
                <div class="packContent">
                    <div class="packHead">
                        <div class="packName">{{ modalItemData.goodsName }}</div>
                        <!-- <div class="packPrice">￥<span>1000</span>.00</div> -->
                        <div class="packPrice">￥<span>{{ modalItemData.salePrice }}</span></div>
                    </div>
                    <div class="packBody">
                        <div class="packLeft">
                            <div class="packTip">套餐包含以下菜品</div>
                            <div style="width: 100%; overflow-x: hidden;">
                                <div class="packList">
                                    <div class="packItem" v-for="(item, index) in modalItemData.priceList[0].detail"
                                        :key="index" :class="{ packItemChose: index == PackIndex }"
                                        @click="chosePack(item.goodsDetail, index)">
                                        <div class="groupTop">
                                            <div class="groupName">{{ item.groupName }}</div>
                                            <div class="groupCount">可选数量<span>{{ item.maxQty }}</span>，已选<span
                                                    style="color: #FF6A00;">{{ item.allQty }}</span></div>
                                        </div>
                                        <div class="groupbottom" v-for="(i, s) in item.goodsDetail" :key="s">
                                            <div class="groupGoods">
                                                <div class="goodsName">{{ i.goodsName }}</div>
                                                <div class="goodsCount">{{ i.defaultQty }}</div>
                                                <div class="goodsunit">{{ i.uomName }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="packRight">
                            <div class="allocationTip" v-if="PackDetail">套餐配置</div>
                            <div class="allocationList" v-if="PackDetail">
                                <div class="allocationItem" v-for="(item, index) in PackDetail" :key="index">
                                    <!-- isEstmClear -->
                                    <div :class="{ goodsClear: item.isEstmClear == 1 }">
                                        <div class="itemName" :class="{ itemNameChose: index == flavorIndex }"
                                            @click="getPackFlavorS(item.goodsFlavor, index)">{{ item.goodsName }}<span
                                                v-if="item.isEstmClear == 1">(沽清)</span></div>
                                    </div>

                                    <div class="itemNum" :class="{ operType4: operType == 4 || item.isEstmClear == 1 }">
                                        <div class="reduce" @click="PackDetailReduce(index)">-</div>
                                        <div class="num">{{ item.defaultQty }}</div>
                                        <div class="add" @click="PackDetailAdd(index)">+</div>
                                    </div>
                                </div>
                            </div>

                            <div class="allocationTaste">
                                <div class="tasteTip">
                                    <span v-if="PackDetail[flavorIndex].goodsFlavor.length == 0">商品暂无口味</span>
                                    <span v-if="PackDetail[flavorIndex].goodsFlavor.length > 0">口味</span>
                                </div>
                                <div class="tasteList">
                                    <div v-for="(item, index) in PackDetail[flavorIndex].goodsFlavor" :key="index"
                                        :class="{ tasteActive: item.flavorState }" @click="MultipleT(item)">
                                        {{ item.Name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="packGoodsShow = false">取 消</el-button>
                        <el-button @click="packAllSub(modalItemData.priceList[0].detail)">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="规格" v-model="priceShow" width="15%" destroy-on-close :show-close="false" center
                style="border-radius: 10px;" class="FlavorDialog">
                <div style="padding: 10px 0; text-align: center; cursor: pointer; background-color: #E6E6E6; margin-bottom: 10px; border-radius: 10px;"
                    v-for="(item, index) in priceTypes.priceList" :key="index" @click="setPriceIndex(index)"
                    :class="{ setPrices: setPriceIndexVal == index }">
                    {{ item.goodsName + '（' + item.uomName + '）' }}
                </div>
                <div v-if="modFlavor">
                    <div>
                        {{ modFlavor.Name }}
                        <!-- <span>(多选)</span> -->
                        <span v-if="modFlavor.IsMultiple == '1'">(多选)</span>
                        <span v-if="modFlavor.IsMultiple != '1'">(单选)</span>
                    </div>
                    <div class="modFlavor">
                        <div v-for="(item, index) in modFlavor.FlavorStr" :key="index"
                            @click="modFlavorChange(modFlavor.IsMultiple, index)" :class="{ isActs: item.isAct == true }">{{
                                item.name }}</div>
                    </div>
                </div>
                <div class="btnS">
                    <div @click="priceShow = false" class="btn">取消</div>
                    <div @click="priceIndex(setPriceIndexVal)" class="btn">确定</div>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script setup>
import Api from '@/api'
import useConfigStore from '@/store/config'
import ls from '@/lib/ls'
import { getLocalIPv4 } from "@/utils/getip.js";
import { string } from 'superstruct';
const PCMaterialPic = useConfigStore().shopInfo.PCMaterialPic
const router = useRouter()
const configStore = useConfigStore()
const digitaShow = ref(false)
const tasteShow = ref(false)
const remarkShow = ref(false)
const keyPressShow = ref(false)
const packGoodsShow = ref(false)
const tempNum = ref('')
const GoodsList = ref('')
const modalItemData = ref('')
const PackDetail = ref('')
const PackFlavor = ref('')
const menuGoodsList = ref([])
const orderRemark = ref('')
const isMenuItemActive = ref('0')
const isTypeActive = ref('0')
// const flavorList = ref(configStore.FlavorList)
// const flavorItem1 = ref([
//     ...configStore.FlavorItem1
// ])
// flavorItem1.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
// const flavorItem2 = ref([
//     ...configStore.FlavorItem2
// ])
// flavorItem2.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
// const flavorItem3 = ref([
//     ...configStore.FlavorItem3
// ])
// flavorItem3.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
const flavorItemS = ref([])
const isFlavorActive = ref('-1')
const priceShow = ref(false)

//规格口味
const modFlavorChange = (isMultiple, index) => {
    if (isMultiple == '1') {
        modFlavor.value.FlavorStr[index].isAct = !modFlavor.value.FlavorStr[index].isAct
    } else {
        modFlavor.value.FlavorStr.map(e => {
            e.isAct = false
        })
        modFlavor.value.FlavorStr[index].isAct = true
    }
}
//多选
const multiple = (isAct) => {
    console.log('多')
}

//商品分类列表
const GoodsTypeList = ref('')
const GetGoodsTypeOrg = () => {
    GoodsTypeList.value = [
        { goodsTypeName: '客人损赔', damageType: '0' },
        { goodsTypeName: '员工损赔', damageType: '1' },
        { goodsTypeName: '自然损赔', damageType: '2' },
    ]
    return
    Api.Common.PcObjProcess.Do({ "functionName": "GetGoodsTypeOrg", "orgCode": "0004", "contentData": "" })
        .then(res => {
            console.log(res)
            GoodsTypeList.value = res.result
        })
}
const changeType = (item, index) => {
    if (index == isTypeActive.value) {
        return
    } else {
        isTypeActive.value = index
        let typeCode = ''
        if (item) {
            typeCode = item.goodsTypeCode
        } else {
            typeCode = ''
        }
        GoodsList.value = ''
        // goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: goodsCode.value, goodsType: typeCode }
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, damageType: item.damageType }
        getGoodsInfo()
    }
}
const keyPressClose = () => {
    keyPressShow.value = false
    goodsInfoPar.value.shortName = ''
    goodsCode.value = ''
    getGoodsInfo()
}
//菜品简码输入框
const goodsCode = ref('')
//获取商品列表
const goodsInfoPar = ref({ pageIndex: 1, pageSize: 17, shortName: '' })
const getGoodsInfo = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDamageGoodsList", "contentData": goodsInfoPar.value })
        .then(res => {
            console.log('获取商品列表 res :>> ', res);
            isPageBtn(goodsInfoPar, res.totalCount)
            // return
            GoodsList.value = res.data
            if (res.data.length > 0) {
                GoodsList.value = res.data
            } else {
                goodsInfoPar.value.pageIndex--
            }
            // GoodsList.value.forEach(good => {
            //     good.isUseGold = good.isUseGold || "0"
            //     good.priceList.forEach(item => {
            //         if (item.isUseGold == "1") {
            //             good.isUseGold = "1"
            //         }
            //     })
            // })
            // GoodsList.value.forEach((good,gindex)=>{
            //     good.indexStr = gindex+1
            //     good.priceList.forEach(price => {
            //         price.indexStr =  gindex+1
            //         if(price.detail && price.detail.length>0){
            //             price.detail.forEach(d => {
            //                 d.indexStr = gindex+1
            //                 if(d.goodsDetail && d.goodsDetail.length>0){
            //                     d.goodsDetail.forEach(g => {
            //                         g.indexStr = gindex+1
            //                     })
            //                 }
            //             })
            //         }
            //     })
            // })
            console.log('GoodsList.value :>> ', GoodsList.value);
        })
}
//翻页按钮是否显示
const disbPageUp = ref(false)
const disbPageDown = ref(false)
const isPageBtn = (goodsInfoPar, totalCount) => {
    console.log(goodsInfoPar, totalCount)
    let num1 = totalCount;
    let num2 = goodsInfoPar.value.pageSize;
    let quotient = '';
    if (num1 % num2 == 0) {
        quotient = parseInt(num1 / num2)
    } else {
        quotient = parseInt(num1 / num2) + 1
    }
    if (goodsInfoPar.value.pageIndex <= 1) {
        disbPageUp.value = true
    } else { disbPageUp.value = false }
    if (goodsInfoPar.value.pageIndex >= quotient) {
        disbPageDown.value = true
    } else { disbPageDown.value = false }
}
//上下页
const PageUp = () => {
    if (goodsInfoPar.value.pageIndex > '1') {
        goodsInfoPar.value.pageIndex--
        getGoodsInfo()
    }
}
const PageDown = () => {
    goodsInfoPar.value.pageIndex++
    getGoodsInfo()
}
const indexStrV = ref(0)
const addGoods = (i) => {
    console.log('i :>> ', i);
    i.ami = true
    setTimeout(() => {
        i.ami = false
    }, 1000)
    goodsCode.value = ''
    setPriceIndexVal.value = '0'
    isMenuItemActive.value = '0'
    // if (i.type == '2') {
    //     packModalShow(i)
    // } else {
    // if (i.priceList.length > 1 || i.goodsFlavor) {
    // priceType(i)
    // } else {
    let temp = { count: '1' }
    Object.assign(i, temp)
    i.indexStr = indexStrV.value++
    menuGoodsList.value.unshift(JSON.parse(JSON.stringify(i)))
    console.log('menuGoodsList.value :>> ', menuGoodsList.value);
    goodsTotal()
    //     }
    // }
}
const priceTypes = ref('')
const modFlavor = ref('')
const priceType = (i) => {
    let flavors = ''
    if (i.goodsFlavor) {
        flavors = JSON.parse(i.goodsFlavor)[0]
        flavors.FlavorStr = flavors.FlavorStr.split(',')
        let a = {
            name: '',
            isAct: false
        }
        let data = []
        flavors.FlavorStr.map(e => {
            a.name = e
            data.push(JSON.parse(JSON.stringify(a)))
        })
        flavors.FlavorStr = data
    }
    modFlavor.value = flavors
    priceShow.value = true
    i.indexStr = indexStrV.value++
    priceTypes.value = i
    priceTypes.value = JSON.parse(JSON.stringify(priceTypes.value))
    console.log(i.priceList)
}
const setPriceIndexVal = ref('0')
const setPriceIndex = (index) => {
    setPriceIndexVal.value = index
}
const priceIndex = (index) => {
    goodsCode.value = ''
    priceShow.value = false
    let a = priceTypes.value.priceList[setPriceIndexVal.value]
    priceTypes.value.priceList = []
    priceTypes.value.priceList.push(a)
    let temp = { count: '1', flavors: [] }
    if (modFlavor.value) {
        modFlavor.value.FlavorStr.map(e => {
            if (e.isAct == true) {
                temp.flavors.push(e.name)
            }
        })
        // temp.flavors = modFlavor.value.FlavorStr
    }
    Object.assign(priceTypes.value, temp)
    menuGoodsList.value.unshift(JSON.parse(JSON.stringify(priceTypes.value)))
    goodsTotal()
    console.log(menuGoodsList.value)
}
const editItem = (i, s) => {
    console.log(i, s)
    isMenuItemActive.value = s;
}
const packModalShow = (i) => {
    console.log(i)
    PackFlavor.value = ''
    packGoodsShow.value = true
    i.indexStr = indexStrV.value++
    i.priceList[0].detail.map(e => {
        e.allQty = 0
        e.goodsDetail.map(s => {
            e.allQty = e.allQty + Number(s.defaultQty)
        })
    })
    console.log(i)
    i.priceList[0].detail.map(e => {
        e.goodsDetail.map(s => {
            if (typeof (s.goodsFlavor) != 'string') {
                s.goodsFlavor.map(v => {
                    v.flavorState = false
                })
            }
        })
    })
    modalItemData.value = i
    chosePack(modalItemData.value.priceList[0].detail[0].goodsDetail, '0')
}
// 选择套餐
const PackIndex = ref(0)
const operType = ref('')
const chosePack = (detail, index) => {
    operType.value = modalItemData.value.priceList[0].detail[index].operType
    PackIndex.value = index
    // return
    flavorIndex.value = 0
    PackDetail.value = detail
    getPackFlavorS(detail[0].goodsFlavor, '0')
    return
    if (flavor) {
        let newFlavor = JSON.parse(flavor)[0].FlavorStr.split(',')
        let tempList = []
        for (let i = 0; i < newFlavor.length; i++) {
            let tempData = { flavorName: '', flavorState: false }
            tempData.flavorName = newFlavor[i]
            tempList.push(tempData)
        }
        PackFlavor.value = tempList
        console.log(PackFlavor.value)
    }
}
// 获取套餐单品口味
const flavorIndex = ref(0)
const getPackFlavorS = (flavor, index) => {
    flavorIndex.value = index
    if (flavor) {
        let newFlavor = ''
        if (typeof (flavor) == 'string') {
            newFlavor = JSON.parse(flavor)
        } else {
            newFlavor = flavor
        }
        newFlavor.map(e => {
            if (e.flavorState == undefined) {
                e.flavorState = false
            }
        })
        // PackFlavor.value = newFlavor
        PackDetail.value[flavorIndex.value].goodsFlavor = newFlavor
        console.log(PackDetail.value[flavorIndex.value].goodsFlavor)
    }
}

const PackDetailAdd = (index) => {
    let maxQty = modalItemData.value.priceList[0].detail[PackIndex.value].maxQty
    let num = 0
    PackDetail.value.map(e => {
        num = num + Number(e.defaultQty)
    })
    if (num >= maxQty) {
        console.log(num, maxQty)
    } else {
        // PackDetail.value[index].defaultQty ++
        modalItemData.value.priceList[0].detail[PackIndex.value].goodsDetail[index].defaultQty++
        modalItemData.value.priceList[0].detail[PackIndex.value].allQty++
    }
}

const PackDetailReduce = (index) => {
    if (PackDetail.value[index].defaultQty > 0) {
        // PackDetail.value[index].defaultQty --
        modalItemData.value.priceList[0].detail[PackIndex.value].goodsDetail[index].defaultQty--
        modalItemData.value.priceList[0].detail[PackIndex.value].allQty--
    }
}
//
const MultipleT = (item) => {
    if (item.IsMultiple == '0') {
        item.flavorState = !item.flavorState
    } else {
        PackDetail.value[flavorIndex.value].goodsFlavor.map(e => {
            e.flavorState = false
        })
        item.flavorState = true
    }
}
// 套餐提交
const packAllSub = (itemS) => {
    let item = []
    itemS.map(e => {
        e.goodsDetail.map(s => {
            item.push(s)
        })
    })
    let allQty = modalItemData.value.priceList[0].detail[PackIndex.value].allQty
    let maxQty = modalItemData.value.priceList[0].detail[PackIndex.value].maxQty
    modalItemData.value.count = '1'
        item.map(e => {
            e.flavors = []
            if (typeof (e.goodsFlavor) != 'string') {
                e.goodsFlavor.map(s => {
                    if (s.flavorState == true) {
                        e.flavors.push(s.Name)
                    }
                })
            }
        })
        let modalItemDataS = JSON.parse(JSON.stringify(modalItemData.value))
        modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail = []

        let packPrice = modalItemData.value.salePrice // 获取套餐的销售价格
        let vipPackPrice = modalItemData.value.vipPrice // 获取套餐的vip价格
        let a = []
        let tots = 0
        item.map((e, i) => {
            let b = {
                unit: e.salePrice,
                tot: e.salePrice * e.defaultQty
            }
            a.push(b)
            tots += b.tot
            if (e.defaultQty > 0) {
                modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail.push(e)
            }
        })
        let c = []
        let d = []
        a.map(e => {
            c.push(packPrice * (e.tot / tots))
            d.push(vipPackPrice * (e.tot / tots))
        })
        item = item.filter(v => v.defaultQty > 0);
        let percentPriceTemp = 0
        let vipPercentPriceTemp = 0
        for (let i = 0; i < item.length; i++) {
            item[i].percentPrice = parseInt(c[i])
            item[i].vipPercentPrice = parseInt(d[i])
            percentPriceTemp += item[i].percentPrice
            vipPercentPriceTemp += item[i].vipPercentPrice
        }
        item[item.length - 1].percentPrice += (packPrice - percentPriceTemp)
        item[item.length - 1].vipPercentPrice += (vipPackPrice - vipPercentPriceTemp)
        // return
        let goodsDetail = modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail

        modalItemDataS.priceList[0].detail = goodsDetail
        menuGoodsList.value.unshift(JSON.parse(JSON.stringify(modalItemDataS)))
        packGoodsShow.value = false
        goodsTotal()
}
//数量加减
const countAdd = () => {
    console.log(isMenuItemActive.value)
    if (menuGoodsList.value[isMenuItemActive.value].count >= 999) {
        alert('超出最大数量')
    } else {
        menuGoodsList.value[isMenuItemActive.value].count++
    }
    goodsTotal()
}
const countSubtract = () => {
    if (menuGoodsList.value[isMenuItemActive.value].count <= 1) {
        alert('数量不能小于1')
    } else {
        menuGoodsList.value[isMenuItemActive.value].count--
    }
    goodsTotal()
}
//打开数量输入器
const editCount = () => {
    if (menuGoodsList.value[isMenuItemActive.value]) {
        tempNum.value = menuGoodsList.value[isMenuItemActive.value].count
        digitaShow.value = true
    }
}
//修改数量
const oninput = (n) => {
    if (tempNum.value.toString().length < 3) {
        tempNum.value += n
    } else {
        alert('数值不能超出3位数')
    }
    // if(menuGoodsList.value[isMenuItemActive.value].count.toString().length < 3){
    //     menuGoodsList.value[isMenuItemActive.value].count += n
    // }else{
    //     alert('数值不能超出3位数')
    // }
}
const delinput = (n) => {
    tempNum.value = n.slice(0, n.length - 1)
}
const removeinput = (n) => {
    tempNum.value = ''
}
const subNum = () => {
    digitaShow.value = false
    menuGoodsList.value[isMenuItemActive.value].count = tempNum.value
    goodsTotal()
}
//商品合计
const goodsTotalData = ref({
    totalCount: 0,
    totlePrice: 0
})
const goodsTotal = () => {
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0
    }
    menuGoodsList.value.map(e => {
        goodsTotalData.value.totalCount += Number(e.count)
        goodsTotalData.value.totlePrice += Number(e.price) * Number(e.count)
    })
}
//打开口味弹窗
const flavorsShow = () => {
    if (menuGoodsList.value.length != 0) {
        thisGoodsFlavor.value = []
        flavorItem1.value.map(e => { e.state = false })
        flavorItem2.value.map(e => { e.state = false })
        flavorItem3.value.map(e => { e.state = false })
        tasteShow.value = true
        flavorItemS.value = []
        flavorItemS.value.push(...flavorItem1.value)
        flavorItemS.value.push(...flavorItem2.value)
        flavorItemS.value.push(...flavorItem3.value)
    }
}
//选择口味组
const changeFlavor = (i, s) => {
    isFlavorActive.value = s
    if (i != '') {
        if (i.code == '577006') {
            flavorItemS.value = flavorItem1.value
        } else if (i.code == '577007') {
            flavorItemS.value = flavorItem2.value
        } else if (i.code == '577008') {
            flavorItemS.value = flavorItem3.value
        }
    } else {
        flavorItemS.value = []
        flavorItemS.value.push(...flavorItem1.value)
        flavorItemS.value.push(...flavorItem2.value)
        flavorItemS.value.push(...flavorItem3.value)
    }
}
//测试方法
const removeElement = (arr, value) => {
    return arr.filter(function (item) {
        return item !== value;
    });
}
//选择口味
const thisGoodsFlavor = ref([])
const ChoseFlavor = (item) => {
    // var arr = [1, 2, 3, 4, 5];
    // var newValue = 3;
    // arr = removeElement(arr, newValue);
    // console.log(arr); // [1, 2, 4, 5]
    // return
    item.state = !item.state
    if (item.state) {
        thisGoodsFlavor.value.push(item.name)
    } else {
        thisGoodsFlavor.value = removeElement(thisGoodsFlavor.value, item.name);
    }
    console.log(thisGoodsFlavor.value)
}
const subFlavor = (flavor) => {
    tasteShow.value = false
    menuGoodsList.value[isMenuItemActive.value].flavors = JSON.parse(JSON.stringify(flavor))
}
// menuGoodsList[isMenuItemActive].flavors
//删除商品
const delGoods = () => {
    menuGoodsList.value.splice(isMenuItemActive.value, 1);
    isMenuItemActive.value = '0'
    goodsTotal()
}
//清空商品
const removeGoods = () => {
    menuGoodsList.value = []
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0
    }
}
//整单备注
const remark = ref('')
const remarkModal = () => {
    remarkShow.value = true
    remark.value = orderRemark.value
}

//键盘
const keyboard = ref(
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '空格', 'shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '清空']
)
const CapsLock = ref(false)
const keyPress = (key) => {
    //输入框
    if (key != 'shift' && key != 'SHIFT' && key != '空格' && key != '清空') {
        if (goodsCode.value == '请输入菜品简码') {
            goodsCode.value = ''
            goodsCode.value += key
        } else {
            goodsCode.value += key
        }
        SearchBtn()
    }
    //空格
    if (key == '空格' && goodsCode.value != '请输入菜品简码') {
        goodsCode.value += ' '
        SearchBtn()
    }
    //清空
    if (key == '清空') {
        goodsCode.value = ''
        SearchBtn()
    }
    //大小写切换
    let Caps = ''
    if (key == 'shift' && !CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toUpperCase()
        keyboard.value = Caps.split(',')
    } else if (key == 'SHIFT' && CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toLowerCase()
        keyboard.value = Caps.split(',')
    }
}
// 简码搜索按钮
const SearchBtn = () => {
    if (goodsCode.value != '请输入菜品简码') {
        GoodsList.value = ''
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: goodsCode.value }
        console.log(goodsInfoPar.value)
        getGoodsInfo()
    } else {
        goodsInfoPar.value = { pageIndex: 1, pageSize: 17, shortName: '' }
        getGoodsInfo()
    }
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

//下单
const orderBatchCode = ref('')
const placeOrder = () => {
    let details = menuGoodsList.value.map(e => {
        return {
            ...e,
            isDamage: '1',
            doType: "add",
            salePrice: e.price,
            orderQty: e.count
        }
    })
    let router_orderBatchCode = router.currentRoute.value.query.orderBatchCode
    let contentData = {
        consumeCode: ls.get('TABLE_INFO').consumeCode,
        roomCode: ls.get('TABLE_INFO').roomCode,
        // consumeCode: "0004202402050006",
        // roomCode: "0004003",
        remark: orderRemark.value,
        operType: "",
        ip: ip.value,
        detail: details,
        orderBatchCode: router_orderBatchCode,
        payType: '1',
    }

    // return
    Api.Common.PcObjProcess.Do({ functionName: "orderAdd", contentData })
        .then(res => {
            menuGoodsList.value = []
            orderRemark.value = ''
            remark.value = ''
            orderBatchCode.value = res.orderBatchCode
            ElNotification({
                title: '提示',
                message: '下单成功',
                type: 'success',
            })
            router.back()
        })
}
const placeCheckout = () => {
  
    let details = menuGoodsList.value.map(e => {
        return {
            ...e,
            isDamage: '1',
            doType: "add",
            itemType: '1',
            salePrice: e.price,
            orderQty: e.count
        }
    })
    let contentData = {
        consumeCode: ls.get('TABLE_INFO').consumeCode,
        roomCode: ls.get('TABLE_INFO').roomCode,
        // consumeCode: "0004202402050006",
        // roomCode: "0004003",
        remark: orderRemark.value,
        operType: "",
        detail: details,
        payType: '1', // 1已出品
    }
    console.log('contentData.detail :>> ', contentData.detail);
    if (contentData.detail.length <= 0) return ElNotification({
        title: '提示',
        message: '请先选择商品',
        type: 'warning',
    })
    if(goodsTotalData.value.totlePrice <= 0 ){ // 金额为零时的损赔支付
        let contentData = {
            consumeCode: ls.get('TABLE_INFO').consumeCode,
            roomCode: ls.get('TABLE_INFO').roomCode,
            operType: "1", // 1 正常下单
            detail: details, // 商品
            orderBatchCode: '',
            payType: '1', // 1已出品
        };
        Api.Common.PcObjProcess.Do({
            functionName: "orderAdd",
            contentData,
        }).then((res) => {
            console.log(res);
            
            menuGoodsList.value = []
            orderRemark.value = ''
            remark.value = ''
            orderBatchCode.value = res.orderBatchCode
            console.log(orderBatchCode.value);
            ElNotification({
                title: '提示',
                message: '损赔成功',
                type: 'success',
            })
        });
    }else{
        console.log(contentData.detail);
        contentData.detail.forEach(item => {
            if(!item.vipPrice && item.vipPrice != 0){
                item.vipPrice = item.salePrice
            }
        });
        ls.set('WARES_ORDER', contentData.detail)
        let router_orderBatchCode = router.currentRoute.value.query.orderBatchCode
        router.push({ path: '/order/pay', query: { consumeCode: ls.get('TABLE_INFO').consumeCode, orderBatchCode: router_orderBatchCode, todo: 'orderAdd', loss: true } })
    
        // Api.Common.PcObjProcess.Do({ functionName: "orderAdd", contentData })
        //     .then(res => {
        //         menuGoodsList.value = []
        //         orderRemark.value = ''
        //         remark.value = ''
        //         orderBatchCode.value = res.orderBatchCode
        //         console.log(orderBatchCode.value);
        //         router.push({ path: '/order/pay', query: { consumeCode: ls.get('TABLE_INFO').consumeCode } })
        //     })
    }
   

}
const jump = () => {
    router.push({
        path: '/replaceDishes',
        query: {
            code: orderBatchCode.value,
        }
    })
}
//初始化
const onInit = async () => {
    GetGoodsTypeOrg()
    getGoodsInfo()

}
onInit()
</script>
<style scoped lang="scss">
.body{
    background-color: #F2F2F2;
}
.pageClose {
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 20px;
    padding-right: 80px;
    padding-left: 80px;
    display: flex;
    margin-bottom: 10px;
    background-color: #F2F2F2;

    div {
        width: 120px;
        padding: 18px 0;
        border-radius: 10px;
        text-align: center;
        font-size: 18px;
        background-color: #CCCCCC;
    }
}

::v-deep(.FlavorDialog) {
    .modFlavor {
        display: flex;
        align-items: center;
        margin-top: 15px;

        div {
            cursor: pointer;
            background-color: rgb(230, 230, 230);
            padding: 3px 10px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .isActs {
            background-color: #FFE566;
        }
    }

    .setPrices {
        background-color: #FFE566 !important;
        color: #212121 !important;
    }

    .btnS {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        .btn {
            width: 45%;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #FF6A00;
            color: #FF6A00;
            padding: 10px 0;
        }

        .btn:hover {
            background-color: #FF6A00;
            color: #fff;
            cursor: pointer;
        }
    }
}

* {
    font-size: 16px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* 标准语法 */
}

.body {
    width: 100%;
    overflow-x: hidden;
}

.boxContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: calc(100% - 100vw);
    background-color: #F2F2F2;
    color: #212121;
    box-sizing: border-box;
    padding: 20px 100px;
    padding-top: 0;
}

.boxLeft {
    display: flex;
    justify-content: flex-end; /* 水平对齐到右侧 */
    align-items: flex-start; /* 垂直对齐到顶部 */

    .orderBox {
        width: 520px;
        height: 800px;
        background: #fff;
        border-radius: 8px;

        .orderDetails {
            width: 100%;
            height: 720px;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            position: relative;

            .foolNull {
                text-align: center;
                margin-top: 240px;
                margin-left: 150px;
                position: absolute;

                img {
                    width: 60px;
                    height: auto;
                }

                div {
                    font-size: 18px;
                    color: #FF6A00;
                    padding: 5px 0;
                }
            }

            .tableTop {
                font-size: 23px;
                font-weight: bold;
                box-sizing: border-box;
                padding: 15px 20px;
            }

            .tableInfo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
            }

            .MenuTitle {
                display: flex;
                align-items: center;
                background-color: #E6E6E6;
                box-sizing: border-box;
                padding: 13px 22px;
                margin: 16px 10px 0 10px;
                border-radius: 8px;

                div {
                    text-align: center;
                }

               div:nth-child(1) {
                    width: 30%;
                    text-align: left;
                }

                div:nth-child(2) {
                    width: 22%;
                    text-align: right;
                    
                }

                div:nth-child(3) {
                    width: 28%;
                    transform:translateX(-6%)
                    
                }
                div:nth-child(4) {
                    width: 20%;
                }
            }
      .MenuMain {
                display: flex;
                justify-content: space-between; /* 左右两端对齐 */
                overflow-y: hidden;
            
            .MenuList::-webkit-scrollbar {
                      display: none; /* 隐藏滚动条 */
            }
            .MenuList {
                width: 100%;
                height: 645px;
                overflow-y: scroll;

                // background-color: red;
                .listRemark {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: #E6E6E6;
                    padding: 10px 20px;
                    width: 100%;

                    div {
                        color: #999999;
                        font-size: 15px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        /* 设置为想要的最大行数 */
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .MenuItem {
                    // display: flex;
                    // align-items: center;
                    cursor: pointer;
                    background-color: #F9F9F9;
                    margin: 10px;
                    border-radius: 8px;
                    box-sizing: border-box;
                    padding: 14px 10px;

                    .goodsTitle {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        div {
                            text-align: center;
                        }

                        .name {
                            width: 55%;
                            text-align: left;

                            span {
                                background-color: #FF3333;
                                color: #fff;
                                font-size: 14px;
                                padding: 0 5px;
                                border-radius: 5px;
                                margin-right: 5px;
                            }
                        }

                        .price {
                            width: 30%;
                        }

                        .count {
                            width: 15%;
                        }
                    }

                    .goodsTaste {
                        font-size: 13px;
                        color: #666;
                        margin: 10px 0 0 20px;
                    }

                    .goodsMinutia {
                        display: flex;
                        align-items: center;
                        margin-top: 10px;

                        .dot {
                            background-color: #FF6A00;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            margin: 0 8px 0 15px;
                        }

                        .typ {
                            font-size: 13px;
                        }

                        .fvor {
                            font-size: 13px;
                        }

                        .count {
                            font-size: 13px;
                            margin-left: 5px;
                        }
                    }
                }

                .MenuItemActive {
                    background-color: #FFFBE5;
                }
            }
      }

            .orderPage {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;

                div {
                    background-color: #F2F2F2;
                    color: #00AAFF;
                    width: 44%;
                    text-align: center;
                    padding: 12px 0;
                    border-radius: 10px;
                }
            }
        }

        .orderCheckout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 10px;
            margin-top: 10px;

            div {
                // width: 45%;
                width: 98%;
                padding: 20px 0;
                border-radius: 10px;
                font-size: 18px;
                text-align: center;
                background-color: #FFD400;
                cursor: pointer;
            }
        }
    }

    .menuOperation {
        padding-right: 0px;
        background: rgba(255, 255, 255, 0);
        border-radius:0 10px 10px  0;

        div {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFF6CC;
            font-size: 18px;
            padding: 0 15px;
            width: 120px;
            height: 60px;
            border-radius: 10px;
            margin: 11px;
            margin-bottom: 20px;

            img {
                width: 32px;
                height: 32px;
                margin-left: 7px;
            }
        }
    }
}

.boxRight {
    width: 1170px;
    background-color: #fff;
    border-radius: 10px;

    .goodsBox {
        width: 100%;
        height: 800px;
        // background-color: #fff;
        box-sizing: border-box;
        padding-top: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .goodsLeft {
            .menuScroll {
                width: 150px;
                border-radius: 8px;
                overflow: hidden;
            .goodsMenu::-webkit-scrollbar {
                display: none; /* 隐藏滚动条 */
            }
                .goodsMenu {
                    width: 140px;
                    height: 720px;
                    border-radius: 8px;
                    background-color: #fff;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    margin-left: 10px;
                

                    div {
                        width: 120px;
                        padding: 18px 0;
                        font-size: 18px;
                        border-radius: 8px;
                        color: #666666;
                        text-align: center;
                        cursor: pointer;
                        border: 1px solid #E6E6E6;
                        margin-bottom: 20px;
                    }

                    .TypeActive {
                        background-color: #FF3333;
                        color: #FFFFFF;
                    }
                }
            }

            .sCodeSearch {
                position: relative;
                margin-left: 10px;
                margin-top: -20px;


                .SearchBtn {
                    width: 120px;
                    padding: 18px 0;
                    background-color: #FFD400;
                    border-radius: 10px;
                    font-size: 18px;
                    text-align: center;
                    cursor: pointer;
                }

                .SearchPanel {
                    background-color: #FFFFFF;
                    position: absolute;
                    right: -605px;
                    bottom: 1px;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 1px solid #FFD400;
                    box-sizing: border-box;
                    padding: 20px;
                    z-index: 99;
                    width: 600px;
                    z-index: 100;

                    // height: 610px;
                    .SearchHead {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .SearchBar {
                            display: flex;
                            align-items: center;
                            border: 1px solid #FFD400;
                            box-sizing: border-box;
                            padding: 1px;
                            border-radius: 30px;
                            height: 48px;

                            div {
                                width: 400px;
                                color: #999999;
                                box-sizing: border-box;
                                padding-left: 20px;
                            }

                            input {
                                width: 400px;
                                color: #999999;
                                box-sizing: border-box;
                                padding-left: 20px;
                            }

                            span {
                                font-size: 18px;
                                background-color: #FFD400;
                                border-radius: 30px;
                                width: 82px;
                                height: 44px;
                                line-height: 44px;
                                text-align: center;
                                cursor: pointer;
                            }
                        }

                        img {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    .SearchKey {
                        border: 1px solid #767676;
                        border-radius: 10px;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 20px;

                        div {
                            width: 10%;
                            height: 55px;
                            line-height: 55px;
                            text-align: center;
                            border: 1px solid #E1E1E1;
                            color: #161616;
                            font-size: 17px;
                            cursor: pointer;
                        }

                        div:last-child {
                            width: 20%;
                        }
                    }
                }
            }
        }

        .goodsRight {
            width: 1026px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-left: 20px;

            .goodsItemAmi {
                animation: goodsAmi 1s ease-in-out forwards;
            }

            @keyframes goodsAmi {
                0% {
                    background-color: #fff;
                }

                50% {
                    background-color: #FFFBE5;
                }

                100% {
                    background-color: #fff;
                }
            }

            .goodsItem {
                background-color: #F2F2F2;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 10px;
                margin-bottom: 11px;
                position: relative;
                cursor: pointer;

                .goodsLogoS {
                    position: relative;
                    border-radius: 5px;
                    // overflow: hidden;
                    margin-bottom: 4px;
                    .img-jinbi{
                        position: absolute;
                        width: 40px;
                        height: 20px;
                        right: -10px;
                        top: -10px;
                    }

                    .goodsLogo {
                        width: 140px;
                        height: 140px;
                        vertical-align: middle;
                    }

                    .goodsVipPrice {
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-color: rgba($color: #000000, $alpha: 0.5);
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        padding: 2px 0;
                    }
                }

                .goodsName {
                    width: 140px;
                    height: 44px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    line-height: 1.4;

                    span {
                        color: #fff;
                        background-color: #FF3333;
                        font-size: 14px;
                        padding: 0 4px;
                        border-radius: 5px;
                        margin-right: 5px;
                    }
                }

                .goodsPrice {
                    color: #FF3333;
                    font-size: 18px;
                }

                .coin {
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    background-color: #FF6A00;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 30px;
                    letter-spacing: 1px;
                    padding: 1px 5px;
                }
            }

            .holde {
                background-color: transparent;
                width: 160px;
                padding: 0;
                margin: 0;
            }

            .goodsPage {
                // background-color: #fff;
                // box-sizing: border-box;
                // padding: 10px;
                display: grid;
                grid-template-columns: auto;
                // grid-column-gap: 40px;
                grid-row-gap: 20px;
                margin-bottom: 11px;

                div {
                    width: 160px;
                    border-radius: 10px;
                    text-align: center;
                    padding: 39px 0;
                    background-color: #fff;
                    font-size: 22px;
                    cursor: pointer;
                }

                .disbPages {
                    pointer-events: none;
                    background-color: #c0bdbd;
                    color: #666;
                    cursor: not-allowed;
                    opacity: 0;
                }
            }
        }
    }
}

::v-deep(.menuDialog) {
    padding: 0;
    margin: 0;
    top: 190px;
    left: 620px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #FFD400;

    .el-dialog__header {
        background-color: #FFD400;
        padding: 16px 0;

        .el-dialog__title {
            font-size: 19px;
            font-weight: bold;
        }
    }
}

.digitalPanel {
    box-sizing: border-box;
    padding: 30px 20px;
    padding-bottom: 0;

    ::v-deep(.el-input) {
        height: 50px;
        margin-bottom: 30px;

        .el-input__wrapper {
            background-color: #F9F9F9;
            font-size: 18px;
        }

    }

    .digitalNum {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .numBtn {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #212121;
            font-size: 22px;
            background-color: #E6E6E6;
            margin-bottom: 20px;
            border-radius: 10px;
            cursor: pointer;
        }

        .numBtn:hover {
            background-color: #FF6A00;
            color: #fff;
        }
    }
}

.dialog-footer {
    display: block;
    padding-bottom: 30px;

    .el-button {
        width: 160px;
        height: 60px;
        font-size: 26px;
        border-color: #FF6A00;
        color: #FF6A00;
        border-radius: 10px;
    }

    .el-button:hover {
        background-color: #FF6A00;
        color: #fff;
    }

    .el-button+.el-button {
        margin-left: 30px;
    }
}

.tasteContent {
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    align-items: flex-start;
    height: 450px;

    .tasteClass {
        width: 15%;
        height: 100%;
        background-color: #FAFAFA;
        border-radius: 10px;
        overflow: hidden;

        div {
            text-align: center;
            font-size: 18px;
            color: #666;
            padding: 19px 0;
            cursor: pointer;
        }

        .FlavorActive {
            background-color: #FFE566;
            color: #212121;
        }
    }

    .tasteList {
        width: 85%;
        display: grid;
        box-sizing: border-box;
        padding-left: 20px;
        grid-template-columns: repeat(4, 23%);
        justify-content: space-between;
        grid-gap: 20px 0;

        .tasteItem {
            background-color: #E6E6E6;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
            padding: 19px 0;
            cursor: pointer;
        }

        .tasteActive {
            background-color: #FFE566;
            color: #212121;
        }
    }
}

.remarkContent {
    box-sizing: border-box;
    padding: 18px;
    position: relative;

    textarea {
        font-size: 18px;
        resize: none;
        width: 100%;
        background-color: #FAFAFA;
        box-sizing: border-box;
        padding: 18px 20px;
    }

    div {
        position: absolute;
        right: 30px;
        bottom: 30px;
        color: #00AAFF;
        cursor: pointer;
    }
}

::v-deep(.packDialog) {
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;

    .el-dialog__header {
        padding: 0;
    }

    .packContent {
        box-sizing: border-box;
        padding: 20px 40px;
        height: 720px;

        .packHead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #E5E5E5;
            padding-bottom: 20px;

            .packName {
                font-size: 22px;
                font-weight: bold;
                color: #212121;
            }

            .packPrice {
                color: #FF6A00;
                font-weight: bold;

                span {
                    font-size: 30px;
                }
            }
        }

        .packBody {
            display: flex;
            justify-content: space-between;
            color: #212121;
        }

        .packLeft {
            width: 38%;

            .packTip {
                font-size: 18px;
                padding: 18px 0;
            }

            .packList {
                width: 104%;
                height: 560px;
                overflow-y: scroll;

                .packItem {
                    background-color: #FAFAFA;
                    box-sizing: border-box;
                    padding: 15px 20px;
                    border-radius: 10px;
                    margin-bottom: 20px;
                    cursor: pointer;

                    .groupTop {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .groupName {
                            font-size: 18px;
                        }

                        .groupCount {
                            span {
                                font-size: 18px;
                                padding-left: 8px;
                            }
                        }
                    }

                    .groupbottom {
                        background-color: #F2F2F2;
                        border-radius: 10px;
                        box-sizing: border-box;
                        padding: 10px 20px;
                        margin-top: 15px;
                        margin-bottom: 6px;

                        .groupGoods {
                            display: flex;
                            align-items: center;
                            line-height: 2.4;

                            .goodsName {
                                width: 60%;
                            }

                            .goodsCount {
                                width: 30%;
                                text-align: center;
                                color: #FF6A00;
                            }

                            .goodsunit {
                                width: 10%;
                                text-align: right;
                            }
                        }
                    }
                }

                .packItemChose {
                    background-color: #FFF4BF;

                    .groupbottom {
                        background-color: #FFFBE5;
                    }
                }
            }
        }

        .packRight {
            width: 57%;

            // height: 500px;
            .allocationTip {
                font-size: 18px;
                padding: 18px 0;
                border-bottom: 1px solid #E5E5E5;
            }

            .allocationList {
                display: grid;
                grid-template-columns: repeat(3, 28.5%);
                justify-content: space-between;
                grid-gap: 20px 0;
                padding: 20px 0;
                border-bottom: 1px solid #E5E5E5;

                .allocationItem {
                    // background-color: #F2F2F2;
                    text-align: center;

                    // border: 1px solid #E6E6E6;
                    .itemName {
                        background-color: #F2F2F2;
                        border: 1px solid #E6E6E6;
                        // border-color: #FFE566;
                        padding: 20px 0;
                        border-radius: 10px;
                        cursor: pointer;
                    }

                    .itemNameChose {
                        background-color: #FFE566;
                        border-color: #FFE566;
                    }

                    .itemNum {
                        display: flex;
                        align-items: center;
                        border: 1px solid #DFDFDF;
                        border-radius: 5px;
                        margin-top: 15px;

                        .reduce {
                            width: 25%;
                            border-right: 1px solid #DFDFDF;
                            padding: 10px 0;
                            cursor: pointer;
                        }

                        .num {
                            width: 50%;
                        }

                        .add {
                            width: 25%;
                            border-left: 1px solid #DFDFDF;
                            padding: 10px 0;
                            cursor: pointer;
                        }
                    }

                    .goodsClear {
                        pointer-events: none;
                        // background-color: rgba(0,0,0,0.4);
                        border-radius: 10px;
                        overflow: hidden;

                        .itemName {
                            background-color: #eee;
                            border: 1px solid #ddd;
                        }

                        .itemNameChose {
                            background-color: #eee;
                            border-color: #ddd;
                        }
                    }

                    .operType4 {
                        background-color: #eee;
                        border: 1px solid #ddd;
                        pointer-events: none;

                        .reduce {
                            border-color: #ddd;
                        }

                        .add {
                            border-color: #ddd;
                        }
                    }
                }

                // .allocationItem:nth-child(1){
                //     background-color: #FFE566;
                //     border-color: #FFE566;
                // }
                // .allocationItem:nth-child(3){
                //     background-color: #FFE566;
                //     border-color: #FFE566;
                // }
            }

            .allocationTaste {
                .tasteTip {
                    padding: 20px 0;
                }

                .tasteList {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .tasteActive {
                        background-color: #FFE566;
                    }

                    div {
                        background-color: #E6E6E6;
                        min-width: 100px;
                        text-align: center;
                        margin-right: 15px;
                        padding: 12px 20px;
                        border-radius: 6px;
                        margin-bottom: 15px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>